<template>
  <div ref="chartDom" ></div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
export default {
  mixins: [resize],
  props: {
    option: {
      type: Object,
      default: ()=> {}
    },
    autoResize: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    option: {
      handler(val) {
        this.chart.setOption(val);
      },
      deep: true
    }
  },
  mounted() {
    this.renderChart();
  },
  beforeDestroy() {
    this.chart.dispose();
    this.chart = null;
  },
  methods:{
    resize(){
      this.chart.resize();
    },
    renderChart() {
      this.chart = echarts.init(this.$refs.chartDom);
      this.chart.setOption(this.option);
    }
  },
}
</script>

<style>
</style>
